<template>
    <div class="boxs">
        <el-table :data="moreArr" border style="margin-top: 15px" v-loading="loading">
            <el-table-column label="media_name" align="center" prop="media_name" />
            <el-table-column label="media_url" align="center" prop="media_url" />
            <el-table-column label="media_cover" align="center" prop="media_cover">
                <template slot-scope="scope">
                    <el-image style="width: 50px; height: 50px" fit="cover" :src="scope.row.media_cover"
                        :preview-src-list="scope.row.imgList">
                    </el-image>
                </template>

            </el-table-column>
            <el-table-column label="import" align="center" prop="import_totals" />
            <el-table-column label="play" align="center" prop="play_totals" />
            <el-table-column label="adView" align="center" prop="adView_totals" />
            <el-table-column label="adView_click" align="center" prop="adView_click_totals" />
            <el-table-column label="revenue" align="center" prop="revenue_totals" />

            <el-table-column label="status" align="center" prop="status">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.status == '0'">normal</el-tag>
                    <el-tag type="danger" v-if="scope.row.status == '1'">ban</el-tag>
                    <el-tag type="warning" v-if="scope.row.status == '2'">Reviewing</el-tag>
                    <el-tag type="danger" v-if="scope.row.status == '3'">Rejected</el-tag>
                </template>

            </el-table-column>
            <el-table-column label="create_time" align="center" prop="create_date" />
            <el-table-column label="update_time" align="center" prop="update_date" />
            <el-table-column label="operate" align="center">
                <template slot-scope="scope">
                    <el-button :disabled="scope.row.status != 2" size="mini" type="warning"
                        @click="shenhe(scope.$index, scope.row)">Review</el-button>
                    <!-- <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">封禁</el-button> -->
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.size"
            @pagination="getMediaList" />

        <el-dialog title="operate" :visible.sync="dialogVisible" width="40%">
            <el-form class="demo-form-inline" label-width="100px" :model="form" :rules="rules" ref="ruleForm">
                <el-form-item label="账号名称" prop="name">
                    <el-input v-model="form.name" placeholder="请输入测试账号名称" />
                </el-form-item>
                <el-form-item label="备注说明">
                    <el-input v-model="form.remark" placeholder="请输入备注" />
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button :type="form.id ? 'warning' : 'primary'" @click="affirm">{{
            form.id ? "确认修改" : "确认添加"
        }}</el-button>
            </div>
        </el-dialog>
        <el-dialog title="operate" :visible.sync="dialogVisible1" width="40%">
            <el-form class="demo-form-inline" label-width="100px" :model="form1" :rules="rules" ref="ruleForm">
                <el-form-item label="media_name">
                    <el-input disabled v-model="form1.media_name" placeholder="" />
                </el-form-item>
                <el-form-item label="media_url">
                    <el-input disabled v-model="form1.media_url" placeholder="" />
                </el-form-item>
                <el-form-item label="media_cover">
                    <el-image style="width: 100px; height: 100px" fit="cover" :src="form1.media_cover"
                        :preview-src-list="form1.imgList">
                    </el-image>
                </el-form-item>
                <el-form-item label="status">
                    <el-radio v-model="form1.status" label="0">Approve</el-radio>
                    <el-radio v-model="form1.status" label="3">Reject</el-radio>
                </el-form-item>

                <el-form-item label="reason" v-if="form1.status == 3">
                    <el-input v-model="form1.reason" placeholder="reason" />
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible1 = false">Cancel</el-button>
                <el-button :type="form.id ? 'warning' : 'primary'" @click="shenhesubmit">{{
            form.id ? "Confim" : "Confim"
        }}</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { addTests, getTests, upTests, delTests } from "@/api/tests";
import { getMediaList, editMedia } from "@/api/porter";
export default {
    name: "media",
    data() {
        return {
            queryParams: {
                page: 1,
                size: 10,
            },
            total: 0,
            loading: false,
            addLoading: false,
            moreArr: [],
            dialogVisible: false,
            dialogVisible1: false,
            form: {
                name: "",
                remark: ""
            },
            form1: {

            },
            search: "",
            rules: {
                name: [
                    { required: true, message: '请输入测试账号名称', trigger: 'blur' },
                    { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
                ]
            },
        }
    },
    created() {
        this.getMediaList();
    },
    methods: {
        shenhe(index, row) {
            this.form1 = Object.assign({}, row);

            this.form1.status = '0'
            this.dialogVisible1 = true
        },
        async getMediaList() {
            this.loading = true;
            let { data ,total} = await getMediaList(this.queryParams);

            data.forEach(item => {
                if (item.adView_click_totals == null) {
                    item.adView_click_totals = 0
                }
                
                 
            });
            this.loading = false;
            this.moreArr = data;
            this.total=total
        },
        handleQuery() {
            this.queryParams.page = 1;
            this.getMediaList();
        },
        async affirm() {
            this.$refs['ruleForm'].validate(async (valid) => {
                if (!valid) return;
                try {
                    this.addLoading = true;
                    !this.form.id && await addTests(this.form);
                    this.form.id && await upTests({ ...this.form });
                    this.addLoading = false;
                    this.$message.success(this.form.id ? "修改成功！" : "添加成功！")
                    this.getUsreList();
                    this.dialogVisible = false;
                } catch (e) {
                    this.addLoading = false;
                }
            });
        },
        async shenhesubmit() {
            try {
                if (this.form1.status == 0) {
                    this.form1.reason = '-'
                }
                if (this.form1.media_cover) {
                    this.form1.imageUrl = this.form1.media_cover
                }
                await editMedia(this.form1);
                this.addLoading = false;
                this.$message.success("操作成功")
                this.getMediaList();
                this.dialogVisible1 = false;
            } catch (e) {
                this.addLoading = false;
            }
        },
        openDialog() {
            this.form = {};
            this.dialogVisible = true;
        },
        handleEdit(i, row) {
            this.form = { ...row };
            this.dialogVisible = true;
        },
        handleDelete(index, row) {
            this.$confirm('此操作将永久删除该测试账号, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'error'
            }).then(async () => {
                await delTests({ id: row.id });
                this.getMore();
                this.$message({
                    message: '删除成功！',
                    type: 'success'
                });
            })
        },
    }
}
</script>
<style lang="scss" scoped>
.boxs {
    padding: 20px;
}
</style>
